<template>
  <el-row class="homepage">
    <el-col :span="5" class="menulist">
      <h2 class="title"><span>维修服务系统</span></h2>

      <el-menu
        default-active="1-1"
        class="menulist-menu"
        @open="handleOpen"
        @close="handleClose"
        @select="handleMenuSelect"
        unique-opened="true"
        router
      >
        <!-- 动态渲染权限菜单 -->
        <el-sub-menu v-for="menu in filteredMenus" :key="menu.index" :index="menu.index">
          <template #title>
            <i :class="menu.icon"></i>
            <span>{{ menu.title }}</span>
          </template>
          <el-menu-item v-for="item in menu.children" :key="item.index" :index="item.index">
            {{ item.title }}
          </el-menu-item>
        </el-sub-menu>
        <!-- 个人中心（所有角色可见） -->
        <el-sub-menu index="5">
          <template #title>
            <i class="el-icon-headset"></i>
            <span>个人中心</span>
          </template>
          <el-menu-item index="user-info-edit">信息修改</el-menu-item>
          <el-menu-item index="permission-application">权限申请</el-menu-item>
          <el-menu-item index="station-join-apply">申请入站</el-menu-item>
        </el-sub-menu>
      </el-menu>
    </el-col>
    <el-col :span="19" :offset="5">
      <div class="logout-container">
        <el-button type="text" class="logout-btn" @click="handleLogout"> 登出 </el-button>
      </div>
      <div class="content-container"><router-view></router-view></div>
    </el-col>
  </el-row>
</template>

<script setup>
import { ref } from 'vue'

import { onMounted } from 'vue'
// 菜单配置（key为角色，value为允许的菜单）
const menuConfig = [
  {
    index: '1',
    title: '客户服务',
    icon: 'el-icon-service',
    roles: [0], // 仅role=0可见
    children: [
      { index: 'create-work-order', title: '创建工单' },
      { index: 'appointment-time', title: '预约时间' },
    ],
  },
  {
    index: '2',
    title: '客服中心',
    icon: 'el-icon-headset',
    roles: [1], // 仅role=1可见
    children: [
      { index: 'ServiceOrderHandle', title: '处理工单' },
      { index: 'work-order-followup', title: '工单回访' },
    ],
  },
  {
    index: '3',
    title: '站点中心',
    icon: 'el-icon-headset',
    roles: [2], // 仅role=2可见
    children: [{ index: 'work-order-dispatch', title: '工单分派' }],
  },
  {
    index: '4',
    title: '维修中心',
    icon: 'el-icon-headset',
    roles: [3], // 仅role=3可见
    children: [{ index: 'repair-workorder-list', title: '工单列表' }],
  },
  {
    index: '6',
    title: '管理中心',
    icon: 'el-icon-headset',
    roles: [4], // 仅role=4可见
    children: [
      { index: 'application-list', title: '申请列表' },
      { index: 'admin-workorder-list', title: '工单列表' },
      { index: 'user-list', title: '用户列表' },
    ],
  },
]

// 获取用户状态

const currentRole = JSON.parse(localStorage.getItem('userInfo')).role
const filteredMenus = ref([])
onMounted(() => {
  filteredMenu()
  console.log(filteredMenus.value, currentRole)
})
// 过滤当前角色可见的菜单
const filteredMenu = () => {
  filteredMenus.value = menuConfig.filter((menu) => menu.roles.includes(currentRole))
}

import { useRouter } from 'vue-router'

// 初始化路由实例
const router = useRouter()
// 登出处理函数
const handleLogout = () => {
  // 清除本地存储的用户信息（根据实际存储方式调整）
  localStorage.removeItem('userInfo')
  // 跳转登录页
  router.push('/login')
}
</script>

<style scoped>
.homepage {
  height: 100%;
  position: relative;
}
.menulist {
  background-color: #545c64;
  color: #fff;
  height: 100vh;
  width: 25vw;
  min-width: 150px;
  position: fixed;
}
.menulist .menulist-menu {
  background-color: #545c64;
  color: #fff;
}
.title {
  text-align: center;
  font-size: 24px;
  font-weight: bold;
}
.menulist-menu el-sub-menu el-menu-item {
  background-color: #545c64;
  color: #fff;
}
.content-container {
  margin-top: 5vw; /* 与左侧菜单宽度相同 */
}
/* 新增登出按钮样式 */
.logout-container {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 1000; /* 确保按钮在最上层 */
}
.logout-btn {
  color: #545c64;
  font-size: 14px;
}
.logout-btn:hover {
  color: #409eff; /* Element Plus主色 */
}
</style>
